<template>
    <td :class="cns" @click="onClick">
        <div :style="{width:width}" @mouseenter="onMouseenter" ref="edom">
            <a v-if="href" :href="formatHref" :target="target"><slot></slot></a>
            <template v-else><slot></slot></template>
        </div>
    </td>
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType, ref } from 'vue'
import {format} from '../../shared/util'
export default defineComponent({
    props:{
        row:{
            type:Object as PropType<Record<string,unknown>>,
            default:()=>({})
        },
        type:{type:String},
        name:{type:String},
        href:{type:String},
        target:{type:String,default:"_blank"},
        width:{type:String},
        align:{type:String},
        clickable:{type:Boolean}
    },
    setup(props){
        const onTdClick = inject<(k:string,r:Record<string,unknown>)=>void>("tdClick")
        const edom = ref<HTMLElement|null>(null)
        const onMouseenter = (e:Event)=>{
            const el = e.target as HTMLElement
            const pel = el.parentElement
            const {offsetWidth,scrollWidth} = el
            if(offsetWidth<scrollWidth&&pel&&pel.dataset.title)
                el.title = pel.dataset.title
        }
        const cns = computed(()=>{
            const cns = {
                'ph-td':true,
                'ph-td-center':props.align==="center",
                'ph-td-right':props.align==="right",
                'ph-pointer':props.clickable===true,
            } as Record<string,boolean>
            if(props.type)
            cns['ph-td-'+props.type]=true
            return cns
        })
        const onClick = (e:Event)=>{
            if(props.clickable){
                e.stopImmediatePropagation()
                e.stopPropagation()
                onTdClick&&onTdClick(props.name as string,props.row)
            }
        }
        const formatHref = computed(()=>{
            return props.href?format(props.row,props.href):""
        })
        return {cns,edom,onMouseenter,onClick,formatHref}
    }
})
</script>
<style lang="scss">
.ph-td{
    flex: 0 0 auto;
    border-width:1px;
    border-color:var(--ph-bd-light);
    border-style:solid;
    position: relative;
    & > div{
        padding:var(--ph-10) var(--ph-15);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 100%;
        &:before{
            content: " ";
            display: inline-block;
            width: 0;
            overflow: hidden;
        }
        a{
            appearance: none;
            color: #009688;
            text-decoration: none;
            &:hover{
                font-weight: bold;
            }
        }
    }
    &-primary{color:var(--ph-primary)}
    &-success{color:var(--ph-success)}
    &-danger{color:var(--ph-danger)}
    &-info{color:var(--ph-info)}
    &-warning{color:var(--ph-warning)}

    &-center{
        text-align: center;
    }
    &-right{
        text-align: right;
    }
}
</style>
